<template>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		width="50%"
	>
		<el-form
			ref="form"
			:model="form"
			label-width="150px"
		>
			<el-form-item
				label="酒店名称"
				prop="name"
				:rules="[{required: true, message: '请输入酒店名称'}]"
			>
				<el-input
					size="small"
					v-model="form.name"
					placeholder="酒店名称"
				></el-input>
			</el-form-item>
			<el-form-item
				label="用户名称"
				prop="username"
				:rules="[{required: true, message: '请输入用户名称'}]"
			>
				<el-input
					size="small"
					v-model="form.username"
					placeholder="用户名称"
				></el-input>
			</el-form-item>
			<el-form-item
				label="手机号码"
				prop="phone"
				:rules="[{required: true, message: '请输入手机号码'}]"
			>
				<el-input
					size="small"
					v-model="form.phone"
					placeholder="手机号码"
				></el-input>
			</el-form-item>
			<el-form-item
				label="地址"
				prop="address"
				:rules="[{required: true, message: '请输入地址'}]"
			>
				<el-autocomplete
					style="width: 100%"
					v-model="form.address"
					:fetch-suggestions="querySearch"
					size="small"
					placeholder="地址"
					@select="selectAddress"
				></el-autocomplete>
			</el-form-item>
			<el-form-item
				label="纬度(latitude)"
				prop="lat"
				:rules="[{required: true, message: '请输入纬度'}]"
			>
				<el-input
					size="small"
					v-model="form.lat"
					placeholder="纬度"
				></el-input>
			</el-form-item>
			<el-form-item
				label="经度(longitude)"
				prop="lng"
				:rules="[{required: true, message: '请输入经度'}]"
			>
				<el-input
					size="small"
					v-model="form.lng"
					placeholder="经度"
				></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button
				size="small"
				@click="dialogVisible = false"
			>
				取 消
			</el-button>
			<el-button
				size="small"
				type="primary"
				:loading="submit_loading"
				@click="ensure"
			>
				确 定
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
  export default {
    name: "edit"
    , data() {
      return {
        dialogVisible: false,
        hotel: {},
        form: {
          id: '',
          name: '',
          username: '',
          phone: '',
          address: '',
          lat: '',
          lng: ''
        },
        submit_loading: false,
      }
    }
    , computed: {
      title() {
        let hotel = this.hotel
        return hotel.id ? '正在编辑 ' + hotel.username : '新增酒店'
      },
      api() {
        let hotel = this.hotel
        return hotel.id ? '/api/v1/hotel/update' : '/api/v1/hotel/save'
      }
    }
    , watch: {
      dialogVisible(bool) {
        this.$fn.setTitle(bool ? this.title : '酒店列表')
      }
    }
    , mounted() {
      this.init()
    }
    , methods: {
      init() {
        // eslint-disable-next-line
        AMap.plugin('AMap.PlaceSearch', () => {
          // eslint-disable-next-line
          this.placeSearch = new AMap.PlaceSearch({
            pageSize: 50,
            extensions: 'all'
          })
        })
        this.$bus.$on('hotel-edit', hotel => {
          this.dialogVisible = true
          this.hotel = hotel
          let form = {}
          Object.keys(this.form).forEach(key => {
            form[key] = hotel[key] || ''
          })
          this.form = form
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate()
          })
        })
      },
      querySearch(str, cb) {
        if (!str) cb([])
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.placeSearch.search(str, (status, result) => {
            let list = []
            if (status === 'complete' && result.info === 'OK') {
              let poiList = result.poiList || {}
              list = poiList.pois.map(item => {
                return {
                  value: item.name,
                  address: item.address,
                  lat: item.location.lat,
                  lng: item.location.lng
                }
              })
            }
            cb(list)
          })
        }, 500)
      },
      selectAddress(item) {
        this.form.lat = item.lat
        this.form.lng = item.lng
      },
      ensure() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          this.submit_loading = true
          let form = this.$fn.deepClone(this.form)
          let action = '编辑'
          if (!form.id) {
            delete form.id
            action = '新增'
          }
          this.$axios.post(this.api, form)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: action + '成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.$bus.$emit('hotel-init', form)
              } else {
                this.$message({
                  message: action + '失败' + res.msg
                  , type: 'error'
                })
              }
            })
            .catch(() => {
              this.$message({
                message: action + '失败'
                , type: 'error'
              })
            })
            .finally(() => {
              this.submit_loading = false
            })
        })
      }
    }
  }
</script>

<style>

</style>